<template>
    <Card>
        <Row solt="title">
            <div>
                <span>计划状态 </span>
                <Select @on-change="selectOnChange" size="small" style="width: 110px" v-model="planStatus">
                    <Option v-for="item in allPlanStatus" :value="item" :key="item">{{item}}</Option>
                </Select>
                <Button type="primary" size="small" @click="addPlanData">添加</Button>
            </div>
        </Row>
        <div class="tableDiv">
            <Table border
                   style="min-width: 1113px"
                   :columns="columns"
                   :data="data.filter(function(item) {
                       if (planStatus=='全部')
                           return item;
                       return item.status==planStatus
                   })"></Table>
        </div>

        <Modal id="planDialog"
               v-model="showModal"
               :mask-closable="false">
            <!--v-if="isShowFirstStep || isShowSecondStep || isShowThirdStep || isShowFourthStep"-->
            <div slot="header" class="modalTitleDiv">
                <div id="modalTitle">{{getModalTitle()}}</div>
            </div>

            <!--第一步 基本信息-->
            <div v-if="isShowFirstStep" class="firstStepDiv">
                <span>计划名称 </span>
                <Input size="small" v-model="addPlanName" placeholder="请输入计划名称"
                       style="width: 250px;text-align: center"/>
                <br><br>
                <span>选择地块 </span>
                <Select size="small" style="width: 250px" v-model="choseAfarmBlock">
                    <Option v-for="item in data" :value="item.afarm_block" :key="item.afarm_block">
                        {{item.afarm_block}}
                    </Option>
                </Select>
                <br><br>
                <span>选择年份 </span>
                <Select v-model="choseYear" size="small" style="width: 250px">
                    <Option v-for="item in yearData" :value="item" :key="item">{{item}}</Option>
                </Select>
                <br><br>
                <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;茬  口</span>
                <Input placeholder="请输入茬口" v-model="crops_rotation" size="small" style="width: 250px;text-align: center"/>
                <br><br>
                <span>选择作物</span>
                <Select size="small" style="width: 250px" v-model="choseCropName">
                    <Option v-for="item in data" :value="item.crop_name" :key="item.crop_name">{{item.crop_name}}
                    </Option>
                </Select>
                <br><br>
               <span>负责人 &nbsp;</span>
                <Input placeholder="请输入负责人" v-model="farmer_id" size="small" style="width: 250px;text-align: center"/>
            </div>

            <!--第二步 计划信息 -->
            <div v-if="isShowSecondStep" class="firstStepDiv">
                <span>起始时间</span>
                <DatePicker size="small" @on-change="choseStartDateOnchange" format="yyyy年MM月dd日" type="date"
                            placeholder="选择起始时间" v-model="_choseStartDate" style="width: 200px"></DatePicker>
                <br><br>
                <span>终止时间</span>
                <DatePicker size="small" @on-change="choseEndDateOnchange" format="yyyy年MM月dd日" type="date"
                            placeholder="选择起始时间" v-model="_choseStartDate" style="width: 200px"></DatePicker>
                <br><br>



                <span>计划产量</span>
                <Input placeholder="计划产量" size="small" v-model="yield" style="width: 200px"/>

                <br><br>
                <span>计划介绍</span>
                <Input placeholder="计划介绍"  type="textarea" size="small" v-model="intro" style="width: 200px"/>

            </div>

            <!--第三步 肥料投入-->
            <div v-if="isShowThirdStep" class="thirdStepDiv">
                <span>N: </span>
                <Input size="small" v-model="fertNValue" placeholder="0" style="width: 150px;margin-right: 10px"/>
                <Button type="success" size="small" @click="autoRecom(0)">自动推荐</Button>
                <br><br>

                <span>P2O5: </span>
                <Input size="small" v-model="fertP2O5Value" placeholder="0" style="width: 150px;margin-right: 10px"/>
                <Button type="success" size="small" @click="autoRecom(1)">自动推荐</Button>
                <br><br>

                <span>K2O: </span>
                <Input size="small" v-model="fertK2OValue" placeholder="0" style="width: 150px;margin-right: 10px"/>
                <Button type="success" size="small" @click="autoRecom(2)">自动推荐</Button>
                <br><br>

                <span>有机肥: </span>
                <Input size="small" v-model="fertOrganicValue" placeholder="0"
                       style="width: 150px;margin-right: 10px;text-align: center"/>
                <Button type="success" size="small" style="opacity: 0">自动推荐</Button>
            </div>

            <!--第四步 浇水计划-->
            <div v-if="isShowFourthStep" class="fourthStepDiv">
                <span>浇水量:&nbsp; </span>
                <Input size="small" placeholder="请输入浇水量" style="width: 240px;" v-model="tastWaterNum"/>
                <br><br>
                <span>状态选择</span>
                <Select v-model="choseStatus" style="width: 240px"  size="small" >
                    <Option v-for="item in statusData" :value="item"  :key="item">{{item}}</Option>
                </Select>
            </div>


            <div slot="footer" class="modalFooter">
                <Button v-if="!isShowFirstStep" size="small" class="stepBtn" @click="firstStepBtnClick">{{firstBtn}}
                </Button>
                <Button size="small" class="stepBtn" @click="nextStepBtnClick">{{nextBtn}}</Button>
            </div>

        </Modal>

    </Card>
</template>
<style>

    .tableDiv {
        margin-top: 30px;
        height: 100%;
        overflow: hidden;
    }

    #planDialog .ivu-modal-header {
        padding: 0 !important;
    }

    #planDialog .ivu-modal-footer {
        border-top: 0px;
        padding-bottom: 20px;
    }

    .modalTitleDiv {
        background: #feba21;
        height: 50px;
        border-radius: 6px 6px 0 0;
    }

    #modalTitle {
        font-size: 20px;
        margin: 0 auto;
        line-height: 50px;
        text-align: center;
    }

    .modalFooter {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
    }

    .stepBtn {
        width: 80px;
    }

    .firstStepDiv {
        width: 100%;
        padding: 10px 10px;
        text-align: center;
    }

    .thirdStepDiv {
        width: 100%;
        padding: 10px 20% 10px;
        text-align: right;
    }

    .fourthStepDiv {
        width: 100%;
        padding: 10px 20% 10px;
        text-align: center;
    }


</style>
<script>
    import tableExpand from './table_expand.vue'

    //操作按钮
    const optionBtn = (h, params, callback) => {
        var type;
        var btnName = params.row.status;
        if (btnName == '终止') {
            type = 'error'
        } else if (btnName == '完成') {
            type = 'primary'
        } else if (btnName == '详情') {
            type = 'info'
        } else if (btnName == '启动') {
            type = 'success'
        } else {
            type = 'ghost'
        }

        return h('Button', {
            props: {
                type: type,
                size: 'small'
            },
            on: {
                click: () => {
                    callback(params)
                }
            }
        }, btnName)
    }

    export default {
        components: {tableExpand},
        data() {
            return {
                showModal: false,
                msg: 'hello vue',
                planStatus: '全部',
                allPlanStatus: [
                    '全部',
                    '未开始',
                    '进行中',
                    '已完成'
                ],
                columns: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(tableExpand, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {
                        key: 'name',
                        title: '计划名称',
                        align: 'center',
//                        width:180
                    },
                    {
                        key: 'afarm_block',
                        title: '地块',
                        align: 'center',
//                        width:150
                    },
                    {
                        key: 'year',
                        title: '年份',
                        align: 'center',
//                        width:100
                    },
                    {
                        key: 'farmer_id',
                        title: '负责人',
                        align: 'center',
//                        width:80
                    },
//                    {
//                        key: 'status',
//                        title: '当前状态',
//                        width: 150,
//                        align: 'center'
//                    },
//                    {
//                        key: 'crops_rotation',
//                        title: '茬口',
//                        width: 150,
//                        align: 'center'
//                    },
//                    {
//                        key: 'crop_name',
//                        title: '种植作物',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'start_date',
//                        title: '起始时间',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'end_date',
//                        title: '终止时间',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'yield',
//                        title: '计划产量(公斤)',
//                        width: 150,
//                        align: 'center'
//                    },
//                    {
//                        key: 'intro',
//                        title: '计划介绍',
//                        width: 150,
//                        align: 'center'
//                    },
//                    {
//                        key: 'N',
//                        title: '氮(公斤)',
//                        width: 150,
//                        align: 'center'
//                    },
//                    {
//                        key: 'P',
//                        title: '磷(公斤)',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'K',
//                        title: '钾(公斤)',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'organic_fert',
//                        title: '有机肥(公斤)',
//                        width: 150,
//                        align: 'center',
//                    },
//                    {
//                        key: 'water_amount',
//                        title: '计划浇水量',
//                        width: 150,
//                        align: 'center',
//                    },
                    {
                        key: 'status',
                        title: '当前状态',
                        width: 150,
                        align: 'center'
                    },
                    {
                        key: 'task_detail',
                        title: '计划任务详情',
//                        width: 120,
                        align: 'center',
                        render: (h, params) => {
                            return h('a', {
                                attrs: {
                                    href: '#/plan_list/index'
                                }
                            }, '编辑')
                        }
                    },

//                    {
//                        key: 'execute_detail',
//                        title: '执行任务详情',
////                        width: 120,
//                        align: 'center',
//                        render: (h, params) => {
//                            return h('a', {
//                                attrs: {
//                                    href: '#/task_executing/index'
//                                }
//                            }, '编辑')
//                        }
//                    },
                    {
                        key: 'options',
                        title: '操作',
                        align:'center',
                        width: 180,
                        render: (h, param) => {
                            return h('div', {
                                style: {
                                    textAlign: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },

                                    on: {
                                        click: () => {
                                            //todo
//                                            this.gotoDetail(param.row.id)
                                            alert("启动了");
                                        }
                                    }
                                }, '启动'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },

                                    on: {
                                        click: () => {
                                            //todo
                                            this.gotoDetail(param.row.id)
                                        }
                                    }
                                }, '详情'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(param)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    },
                ],
                data: [],
                //弹窗相关
                modalTitle: '基本信息',
                firstBtn: "上一步",
                nextBtn: '下一步',
                isShowFirstStep: false,
                isShowSecondStep: false,
                isShowThirdStep: false,
                isShowFourthStep: false,
                isShowFifthStep: false,
                isShowSixthStep: false,
                //添加操作
                choseAfarmBlock: '',//选择的地块
                addPlanName: '',//计划名称
                choseCropName: '',//作物名称
                choseStartDate: '',//选择的起始时间
                _choseStartDate: {},
                choseEndDate:'',//选择结束时间
                _choseEndDate: {},
                farmer_id:'',//负责人
                fertNValue: '0',//投入N肥量
                fertP2O5Value: '0',//投入P肥量
                fertK2OValue: '0',//投入K肥量
                fertOrganicValue: '0',//投入有机肥
                taskWaterName: '',//浇水计划名称
                tastWaterDate: '',//浇水计划时间
                _tastWaterDate: {},
                tastWaterNum: '',//浇水量
                yield:'',//计划产量
                intro:'',//计划介绍
                choseStatus:'',//状态
                statusData:['未开始','进行中','已完成'],
                choseYear:'',//年份
                yearData:[2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017],
                crops_rotation:'',//茬口
            }
        },
        methods: {
            selectOnChange: function (value) {
                console.log(value)
                this.planStatus = value;
            },
            gotoDetail: function (planId) {
                this.$router.push({
                    path: '/task_executing/index',
                    query: {planId: planId}
                })
            },
            addPlanData: function () {
                this.closeDialog();
                this.showModal = true;
                this.isShowFirstStep = true;
            },
            delete: function (params) {
                //  todo 删除
//                this.data.splice(params.index, 1)
                this.$store.commit('deletPlanData',params.index)
            },
            getModalTitle: function () {
                var title = "";
                if (this.isShowFirstStep) {
                    title = '一、基本信息';
                    this.nextBtn = "下一步";
                } else if (this.isShowSecondStep) {
                    this.firstBtn = "上一步";
                    this.nextBtn = "下一步";
                    title = '二、计划信息'
                } else if (this.isShowThirdStep) {
                    this.firstBtn = "上一步";
                    this.nextBtn = "下一步";
                    title = '三、肥料投入(公斤/亩)'
                } else if (this.isShowFourthStep) {
                    this.firstBtn = "上一步";
                    this.nextBtn = "完成";
                    title = '四、计划灌水'
                } else if (this.isShowFifthStep) {
                    title = '五、浇水计划(吨/亩)'
                } else if (this.isShowSixthStep) {
                    title = '六、其他任务'
                }
                return title;
            },

            closeDialog: function () {
                this.isShowFirstStep = false;
                this.isShowSecondStep = false;
                this.isShowThirdStep = false;
                this.isShowFourthStep = false;
                this.isShowFifthStep = false;
                this.isShowSixthStep = false;
            },

            firstStepBtnClick: function () {
                if (this.isShowFirstStep) {
                } else if (this.isShowSecondStep) {
                    this.closeDialog()
                    this.isShowFirstStep = true
                } else if (this.isShowThirdStep) {
                    this.closeDialog()
                    this.isShowSecondStep = true
                } else if (this.isShowFourthStep) {
                    //todo完成操作 保存计划
                    this.closeDialog();
                    this.isShowThirdStep = true;
                }
            },
            nextStepBtnClick: function () {
                if (this.isShowFirstStep) {
                    this.closeDialog()
                    this.isShowSecondStep = true;
                } else if (this.isShowSecondStep) {
                    this.closeDialog()
                    this.isShowThirdStep = true
                } else if (this.isShowThirdStep) {
                    this.closeDialog()
                    this.isShowFourthStep = true
                } else if (this.isShowFourthStep) {
                    //todo完成操作 保存计划
                    this.closeDialog()
                    this.showModal = false;
                    var insertPlanData = {
//                        "id": this.$store.state.planData[this.$store.state.planData.length - 1].id + 1,
//                        "name": this.addPlanName,
//                        "afarm_block": this.choseAfarmBlock,
//                        "crop_name": this.choseCropName,
//                        "start_date": this.choseStartDate,
//                        "end_date": "-",
//                        "fert_amount": [
//                            {sss
//                                "n": this.fertNValue
//                            },
//                            {
//                                "p": this.fertP2O5Value
//                            },
//                            {
//                                "k": this.fertK2OValue
//                            }
//                        ],
//                        "water_amount": 250,
//                        "task_detail": [
//                            {
//                                "id": 1,
//                                "task_id": 1,
//                                "name": this.taskWaterName,
//                                "start_datetime": this.tastWaterDate,
//                                "fert_amount": [
//                                    {
//                                        "n": 0
//                                    },
//                                    {
//                                        "p": 0
//                                    },
//                                    {
//                                        "k": 0
//                                    }
//                                ],
//                                "water_amount": this.tastWaterNum,
//                                "farmer": "张三",
//                                "action_detail": [
//                                    {
//                                        "id": 1,
//                                        "action_id": 1,
//                                        "name": "开水泵1",
//                                        "start_datetime": "2017年4月1日 12:00",
//                                        "farmer": "张三",
//                                        "status": "完成"
//                                    },
//                                    {
//                                        "id": 2,
//                                        "action_id": 2,
//                                        "name": "开电磁阀1",
//                                        "start_datetime": "2017年4月1日 12:00",
//                                        "farmer": "张三",
//                                        "status": "完成"
//                                    },
//                                    {
//                                        "id": 3,
//                                        "action_id": 3,
//                                        "name": "开电磁阀2",
//                                        "start_datetime": "2017年4月1日 12:00",
//                                        "farmer": "张三",
//                                        "status": "完成"
//                                    },
//                                    {
//                                        "id": 4,
//                                        "action_id": 4,
//                                        "name": "关水泵1",
//                                        "start_datetime": "2017年4月1日 13:00",
//                                        "farmer": "张三",
//                                        "status": "未完成"
//                                    },
//                                    {
//                                        "id": 5,
//                                        "action_id": 5,
//                                        "name": "关电磁阀1",
//                                        "start_datetime": "2017年4月1日 13:00",
//                                        "farmer": "张三",
//                                        "status": "未完成"
//                                    },
//                                    {
//                                        "id": 4,
//                                        "action_id": 4,
//                                        "name": "关电磁阀2",
//                                        "start_datetime": "2017年4月1日 13:00",
//                                        "farmer": "张三",
//                                        "status": "未完成"
//                                    }
//                                ],
//                                "status": "进行中"
//                            }
//                        ],
//                        "status": "进行中",
//                        'harvest': '-',

//                        choseAfarmBlock: '',//选择的地块
//                        addPlanName: '',//计划名称
//                        choseCropName: '',//作物名称
//                        choseStartDate: '',//选择的起始时间
//                        _choseStartDate: {},
//                        farmer_id:'',//负责人
//                        fertNValue: '0',//投入N肥量
//                        fertP2O5Value: '0',//投入P肥量
//                        fertK2OValue: '0',//投入K肥量
//                        fertOrganicValue: '0',//投入有机肥
//                        taskWaterName: '',//浇水计划名称
//                        tastWaterDate: '',//浇水计划时间
//                        _tastWaterDate: {},
//                        tastWaterNum: '',//浇水量
                        "id": this.$store.state.planData[this.$store.state.planData.length - 1].id + 1,
                        "name": this.addPlanName,
                        "year": this.choseYear,
                        "crops_rotation":this.crops_rotation,
                        "afarm_block": this.choseAfarmBlock,
                        "crop_name": this.choseCropName,
                        "start_date": this.choseStartDate,
                        "end_date": this.choseEndDate,
                        'yield': this.yield,
                        'intro': this.intro,
                        'N': this.fertNValue,
                        'P': this.fertP2O5Value,
                        'K': this.fertK2OValue,
                        'organic_fert':this.fertOrganicValue,
                        'water_amount':this.tastWaterNum,
                        'task_detail':'这是计划详情噢',
                        'execute_detail':'这是执行任务详情',
                        'farmer_id':this.farmer_id,
                        'status':this.choseStatus,
                    }
                    this.$store.commit('setPlanData', insertPlanData);
//                    this.data.push(insertPlanData);

                } else if (this.isShowFifthStep) {
                    this.closeDialog()
                    this.isShowSixStep = true;
                } else if (this.isShowSixthStep) {
                    this.closeDialog()
                }
            },
            choseStartDateOnchange: function (choseDate) {
                this.choseStartDate = choseDate;
            },
            choseEndDateOnchange:function (choseDate) {
              this.choseEndDate=choseDate;
            },
            autoRecom: function (type) {
                switch (type) {
                    case 0:
                        this.fertNValue = (Math.random() * 10).toFixed(2);
                        break;
                    case 1:
                        this.fertP2O5Value = (Math.random() * 10).toFixed(2);
                        break;
                    case 2:
                        this.fertK2OValue = (Math.random() * 10).toFixed(2);
                        break;
                }
            },
            waterPlanDateChose: function (choseDate) {
                this.tastWaterDate = choseDate;
            }

        },
        created() {
            this.data = this.$store.state.planData;
        }


    }
</script>